<template name='trailerStars'>
	<view class="movie-score-wapper">
		<image v-for="yellow in yelloStars" src="../static/icos/star-yellow.png" class="star-ico"></image>
		<image v-for="gray in grayStars" src="../static/icos/star-gray.png" class="star-ico"></image>
		<view class="movie-score" v-if="showNum == 1">
			{{score}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "trailerStars",
		data() {
			return {
				yelloStars: 0, // 黄色星星数量
				grayStars: 5 // 灰色星星数量
			};
		},
		props: {
			score: 0, // 定义父组件传入的分数
			showNum: 0 // 是否显示具体的分数值 0否 1是
		},
		created() {
			var tempScore = 0;
			if (this.score != null && this.score != undefined && this.score != '') {
				tempScore = this.score;
			}
			this.yelloStars = parseInt(tempScore / 2);
			this.grayStars = 5 - this.yelloStars;
		}
	}
</script>

<style scoped>
	.movie-score-wapper {
		display: flex;
		flex-direction: row;
	}

	.star-ico {
		width: 20upx;
		height: 20upx;
		margin-top: 6upx;
	}

	.movie-score {
		font-size: 12px;
		color: grey;
		margin-left: 8upx;
	}
</style>
